<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:rich="http://richfaces.org/rich"
	  xmlns:a4j="http://richfaces.org/a4j">
<h:head>
	<meta charset="UTF-8"/>
	<link rel="stylesheet" type="text/css" href="css/main.css"/>
</h:head>
<h:body>
  <h:form>
  	<div class="center">
  	<h:panelGroup id="usersGroup">
	  	<h:dataTable id="userTable" value="#{nameCollectionAppBean.users}" var="user" styleClass="styledTable">
	  		<h:column>
	  			<h:outputText value="#{user.name}"></h:outputText>
	  		</h:column>
	  		<h:column>
	  			<h:outputText value="#{user.mailAddress}"></h:outputText>
	  		</h:column>
	  	</h:dataTable>
	  	<br/><br/>	 
	  	<h:commandButton rendered="#{! empty nameCollectionAppBean.users}" value="Sorsolás...">
		  	<f:ajax event="click" render="winnerPanel" listener="#{nameCollectionAppBean.startLottery}"/>
		</h:commandButton>
	</h:panelGroup>
	<a4j:push address="topic1">
	    <a4j:ajax event="dataavailable" render="usersGroup" />
	</a4j:push>
	<h:panelGroup id="winnerPanel">
	  	<h:panelGroup rendered="#{ ! empty nameCollectionAppBean.winners}">
		  	<br/>
		  	<h:outputText value="És a nyertesek..." />
				<h:dataTable id="winnersTable"
					value="#{nameCollectionAppBean.winners}" var="user">
					<h:column>
						<h:outputText value="#{user.name}"></h:outputText>
					</h:column>
					<h:column>
						<h:outputText value="#{user.mailAddress}"></h:outputText>
					</h:column>
				</h:dataTable>
			</h:panelGroup>
  	</h:panelGroup>
  	</div>
  </h:form>
</h:body>
</html>
